import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Button} from '@tarojs/components'
import {http} from '../../utils/http'
import {CONTACT} from '../../constants/api'
import {GetRequest, vcmonitor, clearSearch} from "../../utils/tools";
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './contact.scss'

export default class Contact extends Component {
  state: {
    contactList: {
      weixin: string
      phone: string
      weixin_worktime?: string
      is_show_online?: number
      is_show_online_phone?: number
      is_show_online_weixin?: number
      phone_worktime?: string
    }[]
    phone: string
    isOnline?: number
    weixin: string
  } = {
    contactList: [],
    phone: '',
    isOnline: 1,
    weixin: ''
  }

  async componentDidShow() {
    clearSearch()
    vcmonitor(this)
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    Taro.showLoading({title: '加载中...'})
    if (Taro.getCurrentInstance().router.params.phone) {
      this.setState({phone: Taro.getCurrentInstance().router.params.phone})
    }
    if (Taro.getCurrentInstance().router.params.weixin) {
      this.setState({weixin: Taro.getCurrentInstance().router.params.weixin})
    }
    const res = await http.get(CONTACT, {})
    if (res) {
      const ret = res
      const arr: { [key: string]: any }[] = []
      Object.keys(ret).map(item => {
        arr.push(ret[item])
      })
      this.setState({contactList: arr})
    }
    setTimeout(() => {
      Taro.hideLoading()
    }, 100)
  }

  copy(value) {
    if (value) {
      try {
        Taro.setClipboardData({
          data: value
        })
        if (process.env.TARO_ENV === 'h5') {
          Taro.showToast({title: '复制成功'})
        }
      } catch (e) {
        Taro.showToast({title: '复制失败', icon: 'none'})
      }
    }
  }

  makePhone(value) {
    try {
      Taro.makePhoneCall({
        phoneNumber: value
      })
    } catch (e) {
      Taro.showToast({title: '拨打电话失败', icon: 'none'})
    }
  }

  render() {
    const {contactList, phone, weixin} = this.state
    return (
      <View className='dist-contact-root'>
        <GzhAuth />
        {contactList.length > 0 && contactList.map(item =>
          <View className='contactPhone'>
            <View className='item'>
              {/*电话咨询*/}
              {(phone || item.phone) && item.is_show_online_phone == 1 && <View className='contact-box-phone'>
                <View className='contact-box-phone-text'>
                  拨打服务热线
                  <View className='contact-box-phone-text-content'>
                    {item.phone_worktime && <Text>每日{item.phone_worktime}，</Text>}
                    人工坐席将为您解决问题。
                  </View>
                </View>
                <View className='contact-box-phone-btn' onClick={this.makePhone.bind(this, phone || item.phone)}>
                  <View className='contact-box-phone-btn-btn'>拨打热线</View>
                </View>
              </View>}

              {/*在线咨询*/}
              {process.env.TARO_ENV != 'h5' && item.is_show_online !== 0 && <View className='contact-box-phone contact-box-online'>
                <View className='contact-box-phone-text'>
                  在线咨询
                  <View className='contact-box-phone-text-content'>
                    有任何问题可以随时线上咨询,我们将竭诚为您服务。
                  </View>
                </View>
                <Button  className='contact-box-online-button' openType='contact'>
                  <View className='contact-box-phone-btn'>
                    <View className='contact-box-phone-btn-btn'>立即咨询</View>
                  </View>
                </Button>
              </View>}
              {process.env.TARO_ENV === 'h5' && !!item.h5_customer_url && <View className='contact-box-phone contact-box-online'>
                <View className='contact-box-phone-text'>
                  在线咨询
                  <View className='contact-box-phone-text-content'>
                    有任何问题可以随时线上咨询,我们将竭诚为您服务。
                  </View>
                </View>
                <a href={item.h5_customer_url}>
                  <View className='contact-box-phone-btn'>
                    <View className='contact-box-phone-btn-btn'>立即咨询</View>
                  </View>
                </a>
              </View>}

              {/*微信号*/}
              {(weixin || item.weixin) && item.is_show_online_weixin == 1 && <View className='contact-box-phone contact-box-weChat'>
                <View className='contact-box-phone-text'>
                  微信咨询
                  <View className='contact-box-phone-text-content'>
                    {item.weixin_worktime && <Text>每日{item.weixin_worktime}，</Text>}
                    可以添加微信号
                    <Text className='wexin-code' onClick={this.copy.bind(this, weixin || item.weixin)}>{weixin || item.weixin}</Text>联系我们。
                  </View>
                </View>
              </View>}
            </View>
          </View>)}
      </View>
    )
  }
}
